<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script>
      function Vue(options) {
      const _data = options.data || {}
      const data = typeof _data === 'function' ? _data() : _data;
      const vm = {}
      const keys = Object.keys(data)

      for (let i = 0; i < keys.length; i ++) {
        // 响应式的核心原理
        Object.defineProperty(vm, keys[i], {
          get() {
            console.log(`获取值vm.${keys[i]}`)
            return data[keys[i]]
          },
          set(newVal) {
            data[keys[i]] = newVal
            console.log(`触发了vm.${keys[i]}, 修改值为${newVal}`)
          }
        })

        // 重写子类
        const arr = data[keys[i]]
        for (let j = 0; j < arr.length; j ++) {
          let item = arr[j]
          Object.defineProperty(vm[keys[i]], j, {
            get() {
              return item
            },
            set(newVal) {
              item = newVal
              console.log(`触发了索引.${j}, 修改值为${newVal}`)
            }
          })
        }
      }
      return vm
    }
    var vm = Vue({
      data() {
        return {
          arr: [1,2,3]
        }
      }
    })
    console.log(vm)
</script>
</body>
</html>